<template>
	<view>
		<u-navbar title="编辑计划" :background="navbarBg" title-color="#fff" :border-bottom="false" back-icon-color="#fff"></u-navbar>
		<view class="container">
			<u-form :model="form" label-width="180" ref="uForm">
				<view class="box">
					<view class="title">浇筑信息</view>
					<u-form-item label="计划名称">
						<u-input v-model="form.title" input-align="right" :clearable="false" placeholder="请填写计划名称" />
					</u-form-item>
					<u-form-item label="供应商单位">
						<view class="select-inp" @click="supplierSelectShow = true">
							<text v-if="form.supplierId">{{supplierName(form.supplierId)}}</text>
							<text v-else class="placeholder">请选择</text>
							<u-icon name="arrow-right" color="#c0c4cc"></u-icon>
						</view>
						<u-select v-model="supplierSelectShow" :list="supplierList" @confirm="confirm($event,'supplierId')"></u-select>
					</u-form-item>
					<u-form-item label="要求供应时间">
						<view class="select-inp" @click="timeSelectShow = true">
							<text v-if="form.supplyTime">{{form.supplyTime}}</text>
							<text v-else class="placeholder">请选择</text>
							<u-icon name="arrow-right" color="#c0c4cc"></u-icon>
						</view>
						<u-picker :safe-area-inset-bottom="true" v-model="timeSelectShow" mode="time" :params="params" @confirm="confirm($event,'supplyTime')"></u-picker>
					</u-form-item>
					<u-form-item label="计划浇筑部位">
						<view class="select-inp" @click="positionSelectShow = true">
							<text v-if="form.pourPartId">{{positionName(form.pourPartId)}}</text>
							<text v-else class="placeholder">请选择</text>
							<u-icon name="arrow-right" color="#c0c4cc"></u-icon>
						</view>
						<u-select v-model="positionSelectShow" :list="positionList" @confirm="confirm($event,'pourPartId')"></u-select>
					</u-form-item>
				</view>
				
				<view class="box concrete">
					<view class="title">
						<text>混凝土信息</text>
						<u-icon name="plus-circle" size="42" color="#44C86A" @click="addConcrete"></u-icon>
					</view>
					<view class="info-item" v-for="(item, index) in form.cementList" :key="index">
						<view class="info-hd">
							<text>{{index + 1}}#混凝土</text>
							<u-icon name="minus-circle" size="36" color="#FF5858" @click="removeConcrete(index)"></u-icon>
						</view>
						<view class="info-bd">
							<u-form-item label="标号" :label-style="labelStyle">
								<view class="select-inp" @click="showGradeSelect(index)">
									<text v-if="item.cementTypeId">{{gradeName(item.cementTypeId)}}</text>
									<text v-else class="placeholder">请选择</text>
									<u-icon name="arrow-right" color="#c0c4cc"></u-icon>
								</view>
							</u-form-item>
							<u-form-item label="预算量(m³)" :label-style="labelStyle">
								<input v-model="item.budget" type="text" style="text-align: right;" :clearable="false" placeholder="请填写预算量" @blur="calculate" />
							</u-form-item>
						</view>
						<u-select v-model="gradeSelectShow" :list="gradeList" @confirm="concreteConfirm"></u-select>
					</view>
					<view class="all">合计预算量：<text>{{allbudget}}m³</text></view>
				</view>
				
				<view class="box">
					<view class="title">收货人</view>
					<u-form-item label="收货人">
						<view class="select-inp" @click="showCate">
							<text class="u-line1" v-if="form.consigneeIds.length > 0">{{consigneeName(form.consigneeIds)}}</text>
							<text v-else class="placeholder">请选择</text>
							<u-icon name="arrow-right" color="#c0c4cc"></u-icon>
						</view>
						<cascader ref="cascader" :cascaderData="cascaderData" @confirem="cascaderConfirem" :selectValue="form.consigneeIds"></cascader>
					</u-form-item>
				</view>
				
				<view class="box">
					<view class="title">附件</view>
					<view class="upload-box">
						<u-upload action="" ref="uUpload" :file-list="form.images" ></u-upload>
					</view>
				</view>
			</u-form>
			
			<view class="btn-box">
				<view class="submit" @click="submit">提交</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import configMixins from "../../mixins/config.mixins.js"
	import cascader from "../../components/cascader.vue"
	export default{
		mixins:[configMixins],
		components:{cascader},
		data(){
			return{
				navbarBg:{'background':'rgba(0, 130, 255, 1)'},
				planId:null,
				//label
				labelStyle:{'padding-left':'20rpx'},	
				errorType:['toast'],
				//供应商选择
				supplierSelectShow:false,
				//浇筑部位选择
				positionSelectShow:false,
				//到货时间选择
				timeSelectShow:false,
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: false,
					timestamp: true,
				},
				//标号选择
				gradeSelectShow:false,
				gradeIndex:0,
				//上传接口
				action:"",
				
				//表单数据
				form:{
					title:"",  //计划名
					supplierId:"", //供应商
					supplyTime:"", //预计需求时间
					pourPartId:"", //浇筑部位
					cementList:[ //混凝土
						{
							cementTypeId:"", //标号
							budget:"" //预算量
						}
					],
					consigneeIds:[],
					images:[],//附件列表
				},
				consigneeList:[],
				//总量
				allbudget:0,
				cascaderData: [{
					id:1,
					name:"项目班子",
					children:[{
						id:2,
						name:"王天下"
					}]
				},{
					id:1,
					name:"技术部",
				},{
					id:1,
					name:"工程部",
				},{
					id:1,
					name:"安监机电",
				},{
					id:1,
					name:"综合办",
				}],
			}
		},
		computed:{
			consigneeName(){
				return function(val){
					let arr = []
					val.map(item => {
						let obj = this.consigneeList.find(item1 => {
							return item1.id == item
						})
						if(obj) arr.push(obj.name)
					})
					return arr.toString()
				}
			},
		},
		async onLoad(options){
			this.planId = options.id
			this.getReceiverList()
			await this.getCementType()
			await this.getPositionList()
			await this.getSupplierList()
			this.getPlanDetail()
		},
		methods:{
			//获取采购计划详情
			getPlanDetail(){
				this.$u.api.getPlanDetail(this.planId).then(res => {
					// for(let key in this.form){
					// 	this.form[key] = res[key]
					// }
					if(res.code != 0){
						this.$u.toast(res.msg)
						return false
					}
					this.form.title = res.data.title
					this.form.supplierId = res.data.supplierId
					this.form.supplyTime = res.data.supplyTime
					this.form.pourPartId = res.data.pourPartId
					this.form.consigneeIds = res.data.consigneeIds ? res.data.consigneeIds.split(",") : []
					this.form.images = res.data.images ? res.data.images.split(",") : []
					if(res.cementOrderVos) this.form.cementList = res.data.cementOrderVos
					this.calculate()
				})
			},
			//添加混凝土
			addConcrete(){
				this.form.cementList.push({
					cementTypeId:"",budget:""
				})
			},
			//移除混凝土信息
			removeConcrete(index){
				if(this.form.cementList.length == 1){
					this.$u.toast('请至少填写一条混凝土需求');
					return false;
				}
				this.form.cementList.splice(index, 1)
			},
			//selcet
			confirm(e,key){
				if(key == 'supplyTime'){
					this.form.supplyTime = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}:00`
				}else{
					this.form[key] = e[0].value
				}
			},
			showGradeSelect(index){
				this.gradeIndex = index
				this.gradeSelectShow = true
			},
			concreteConfirm(e){
				this.form.cementList[this.gradeIndex].cementTypeId = e[0].value
			},
			//获取收货人列表
			getReceiverList(){
				this.$u.api.receiverList().then(res => {
					if(res.code != 0){
						this.$u.toast(res.msg)
						return false
					}
					this.consigneeList = res.data
					let arr = []
					res.data.map(item => {
						let obj = arr.find(item1 => {
							return item1.name == item.deptName
						})
						if(obj){
							obj.children.push({
								id:item.id,
								name:item.name
							})
						}else{
							arr.push({
								name:item.deptName,
								children:[{
									id:item.id,
									name:item.name
								}]
							})
						}
					})
					this.cascaderData = arr
				})
			},
			//收货人选择
			showCate() {
				this.$refs.cascader.show()
			},
			cascaderConfirem(e){
				this.form.consigneeIds = e.select_ids
			},
			//计算总量
			calculate(){
				let allbudget = 0
				this.form.cementList.map(item => {
					allbudget += item.budget*1
				})
				this.allbudget = allbudget
			},
			//提交
			submit(){
				//验证
				if(!this.form.title){this.$u.toast('请输入计划名称');return false}
				if(!this.form.supplierId){this.$u.toast('请选择供应商');return false}
				if(!this.form.supplyTime){this.$u.toast('请选择要求供货时间');return false}
				if(!this.form.pourPartId){this.$u.toast('请选择浇筑部位');return false}
				this.form.cementList.map(item => {
					if(!item.cementTypeId){this.$u.toast('请选择标号');return false}
					if(!item.budget){this.$u.toast('请输入预算量');return false}
				})
				if(this.form.consigneeIds.length <= 0){this.$u.toast('请选择收货人');return false}
				
				uni.showLoading({
					mask:'true'
				})
				let data = JSON.parse(JSON.stringify(this.form)),images=[]
				data.consigneeIds = data.consigneeIds.toString()
				data.status = 1
				data.id = this.planId
				this.$refs.uUpload.lists.map(item => {
					if(item.progress == 100) images.push(item.response)
				})
				data.images = images.toString()
				
				this.$u.api.addPlan(data).then(res => {
					if(res.code != 0){
						uni.hideLoading()
						this.$u.toast(res.msg)
						return false
					}
					uni.hideLoading()
					uni.$u.toast('提交成功,请等待审核')
					uni.navigateBack({delta:1})
				}).catch(()=>{
					uni.hideLoading()
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		padding: 30rpx;
		padding-bottom: calc(148rpx + env(safe-area-inset-bottom));
		.box{
			background: #FFFFFF;
			border-radius: 10rpx;
			padding: 24rpx;
			margin-bottom: 20rpx;
			.title{
				font-size: 34rpx;
				font-weight: 800;
				border-bottom: 1px solid rgba(0, 0, 0, 0.1);
				padding-bottom: 24rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
			.info-item{
				.info-hd{
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 32rpx;
					padding: 20rpx 0;
				}
			}
			.select-inp{
				display: flex;
				align-items: center;
				justify-content: flex-end;
				text{
					margin-right: 8rpx;
				}
				.placeholder{
					color: #c0c4cc;
				}
			}
		}
		.concrete{
			.info-item{
				.u-form-item{
					padding: 0;
				}
			}
			.all{
				display: flex;
				justify-content: flex-end;
				font-size: 30rpx;
				font-weight: 600;
				margin-top: 20rpx;
				text{
					color: #1378FF;
				}
			}
		}
		.upload-box{
			padding-top: 10rpx;
		}
	}
	.btn-box{
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background: #fff;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		padding: 30rpx;
		font-size: 34rpx;
		color: #fff;
		text-align: center;
		z-index: 99;
		padding-bottom:calc(30rpx + env(safe-area-inset-bottom)); 
		box-sizing: border-box;
		.save{
			font-size: 30rpx;
			color: #ccc;
			margin-top: 10rpx;
		}
		.submit{
			width: 100%;
			height: 78rpx;
			background: #1378FF;
			border-radius: 16rpx;
			line-height: 78rpx;
		}
	}
	.inp-hidden{
		height: 0 !important;
		min-height: 0 !important;
	}
</style>
